<style>
  .assignment-patrol form .btn-search {
    background: #4fb1ec;
    border-color: #4fb1ec;
    color: #fff;
    margin-left: 20px;
    margin-right: 15px;
    width: 80px;
    height: 34px;
  }

  .assignment-patrol form .btn-reset {
    background: #4fecbc;
    border-color: #4fecbc;
    color: #fff;
    width: 80px;
    height: 34px;
  }

  .assignment-patrol form label {
    font-weight: normal;
    margin-right: 5px;
    color: #111;
  }

  .assignment-patrol form {
    margin-bottom: 30px;
  }

  .assignment-patrol .table-box {
    margin-top: 30px;
  }

  .assignment-patrol .ibox-content {
    border: none;
  }

  .assignment-patrol .table-box {
    margin-bottom: 30px;
  }

  .assignment-patrol .table-box table tr td, .assignment-patrol .table-box table tr th {
    text-align: center;
    color: #111;
    padding: 12px;
    background: #fff;
    font-weight: normal;
  }

  .assignment-patrol {
  }

  .assignment-patrol {
  }

  .assignment-patrol {
  }
</style>
<template>
  <div class="wrapper wrapper-content animated fadeInRight v-cloak comment-style assignment-patrol" v-cloak>
    <div class="row">
      <div class="col-md-12">
        <form id="info_search_form" role="form" class="form-inline" method="post" accept-charset="UTF-8" @submit.prevent="page(1)">
          <input type="hidden" id="bean-reportingType" name="reportingType" value="0">
          <!-- state 事件进度(0上报,1处理,2结案) -->
          <input type="hidden" id="bean-state" name="state" value="">
          <!-- treatmentType 事件处理方式:0直接处理,1分配处理,2报河长办处理,3报上级河长处理 -->
          <input type="hidden" id="bean-treatmentType" name="treatmentType" value="">
          <input type="hidden" id="bean-treatmentAreaId" name="treatmentAreaId" :value="staff.dto().areaId">
          <div class="form-group">
            <label class="font-noraml">事件进度</label>
            <select id="id_state" class="form-control">
              <option value="0">全部</option>
              <option value="1">事件上报</option>
              <option value="2">下级上报</option>
              <option value="3">事件处理</option>
              <option value="4">上报并直接处理</option>
              <option value="5">事件结案</option>
            </select>
          </div>
          <div class="form-group">
            <label class="font-noraml">创建时间</label>
            <div class="input-daterange input-group">
              <input autocomplete="off" type="text" placeholder="点击输入起始时间" class="input-sm form-control" name="dateBegin"/>
              <span class="input-group-addon">到</span>
              <input autocomplete="off" type="text" placeholder="点击输入截止时间" class="input-sm form-control" name="dateEnd"/>
            </div>
          </div>
          <div class="form-group">
            <input type="text" name="keyword" placeholder="请输入关键词" class="input-sm form-control">
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-sm btn-primary btn-search">搜索</button>
            <button type="reset" class="btn btn-sm btn-dafault btn-reset">重置</button>
          </div>
        </form>
        <div class="table-responsive table-scrollable table-box">
          <table class="table table-bordered table-striped  table-hover">
            <thead>
            <tr>
              <th style="width:20px;">#</th>
              <th>所在河道</th>
              <th>事件标题(类型)</th>
              <th>事件描述</th>
              <th>处理方式</th>
              <th>事件进度</th>
              <th>上报时间</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-if="result.data.data && result.data.data.length>0" v-for="(item, index) in result.data.data">
              <td>{{(result.data.pageIndex-1)*result.data.pageSize + index+1}}</td>
              <td>{{item.riverName}}</td>
              <td>{{item.eventType}}</td>
              <td>{{item.eventInfo}}</td>
              <td>{{treatmentTypeEnum[item.treatmentType]}}</td>
              <td>{{stateEnum[item.state]}}</td>
              <td>{{item.reportingDate | date('yyyy-MM-dd HH:mm:ss')}}</td>
              <td>
                <a href="javascript:;" x-show='staff.hasPermission("reportEventPatrol:supervision")' @click="supervision(item)" rel="nofollow" class="label label-info"><i class="fa fa-hourglass"></i> 督导</a>
                <a href="javascript:;" x-show='staff.hasPermission("reportEventPatrol:treatment")' @click="treatment(item)" class="label label-warning"><i class="fa fa-legal"></i> 处理</a>
                <a href="javascript:;" v-show='staff.hasPermission("reportEventPatrol:follow") && item.followState==0' @click="followState(item)" rel="nofollow" class="label label-success"><i class="fa fa-eye"></i> 关注</a>
                <label v-show='item.followState==1' rel="nofollow" class="label label-default"><i class="fa fa-eye"></i> 已关注</label>
              </td>
            </tr>
            <tr v-if="result.data.data==null || result.data.data.length==0">
              <td colspan="8">
                <div class="alert"><strong>{{ result | message }}</strong></div>
              </td>
            </tr>
            </tbody>
          </table>
          <div class="b_page" v-html="tagPages"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import '@/assets/css/style.css'

import $ from '@/assets/js/jquery-vendor.js'
import 'jquery.cookie'
import axios from 'axios'
import '@/assets/js/datepicker-vendor.js'
import {$storage, axiosContentType, site} from '@/assets/js/boss'
import '@/assets/js/pageTag'

export default {
  data() {
    return {
      result: {data: {pageIndex: 1, data: []}, message: ''},
      tagPages: '',
      stateEnum: {0: '事件上报', 1: '事件处理', 2: '事件结案'},
      treatmentTypeEnum: {0: '直接处理', 1: '分配处理', 2: '报河长办处理', 3: '报上级河长处理'}
    }
  },
  mounted() {
    let that = window.$vueApp = this;
    document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
    this.staff.init(function () {
      that.page(1);
    });
    $('.input-daterange').datepicker({
      language: 'zh-CN',
      format: 'yyyy-mm-dd',
      keyboardNavigation: !1,
      forceParse: !1,
      autoclose: !0
    });
  },
  watch: {
    // result: function (val) {
    //   this.$nextTick(function () { console.info('变量result渲染完成'); }
    // }
  },
  methods: {
    changeState(ele) {
      var eventstate = $(ele && ele.target || $('#id_state')).find('option:selected').val();
      // state 事件进度(0上报,1处理,2结案)
      var state = '';
      // treatmentType 事件处理方式:0直接处理,1分配处理,2报河长办处理,3报上级河长处理
      var treatmentType = '';
      switch (eventstate) {
        case '0': { // 全部
          break;
        }
        case '1': { // 事件上报
          state = 0;
          break;
        }
        case '2': { // 下级上报
          treatmentType = 3;
          break;
        }
        case '3': { // 事件处理
          state = 1;
          break;
        }
        case '4': { // 上报并直接处理
          treatmentType = 0;
          break;
        }
        case '5': { // 事件结案
          state = 2;
          break;
        }
      }
      $('#bean-state').val(state);
      $('#bean-treatmentType').val(treatmentType);
    },
    page(pageIndex) {
      let that = this;
      if (!pageIndex) pageIndex = 1;
      that.changeState();
      axios.post(site.reportEvent.page + pageIndex
        , $('#info_search_form').serialize()
        , axiosContentType.xWwwFormUrlencoded
      ).then(function (response) {
        const result = response.data;
        if (result.code === 0) {
          that.result = result;
          that.tagPages = that.tag.page(result.data);
        } else {
          alert(result.message);
        }
      });
    },
    // info(title, item) {
    //   $storage.setItem(site.reportEvent.info, item.id);
    //   this.lbox.openMyBoxLayer(title, site.reportEvent.view + '/info');
    // },
    add(title, item) {
      $storage.setItem(site.reportEvent.info, item.id);
      this.lbox.openMyBoxLayer(title, site.reportEvent.view + '/add?reportingType=0');
    },
    supervision(item) {
      $storage.setItem(site.reportEvent.info, item.id);
      this.lbox.openMyBoxLayer('事件督导-' + item.riverName + '-【' + item.eventType + '】', site.reportEvent.view + '/supervision?reportingType=0');
    },
    treatment(item) {
      $storage.setItem(site.reportEvent.info, item.id);
      this.lbox.openMyBoxLayer('事件处理-' + item.riverName + '-【' + item.eventType + '】', site.reportEvent.view + '/treatment?reportingType=0');
    },
    followState(item) {
      let that = this;
      if (confirm('确认关注吗?')) {
        axios.post(site.reportEvent.follow + item.id, {}).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            that.page(that.result.data.pageIndex);
          } else {
            alert(result.message);
          }
        });
      }
    }
  }
}
</script>
